<template>
  <div id="app">
    <h2>--------App内容--------</h2>
    <h2>{{message}}</h2>
    <!-- 通过 this.$store.state.属性 的方式来访问状态 -->
    <!-- 通过 this.$store.commit('mutation中方法') 来修改状态 -->
    <h2>{{$store.state.counter}}</h2>

    
    <!-- 不要直接通过这种方式修改vuex中的内容,虽然可以正常第一次,但无法使用工具进行调试,应该调用mutations中方法-->
    <!-- <button @click="$store.state.counter++">+</button>
    <button @click="$store.state.counter--">-</button> -->

    <button @click="incr">+</button>
    <button @click="decr">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStudent">添加学生</button>

    <h2>--------App内容: getters相关信息--------</h2>
    <h2>{{$store.getters.powerCounter}}</h2>
    <h2>{{$store.getters.more20stu}}</h2>
    <h2>{{$store.getters.more20stuLength}}</h2>
    <h2>{{$store.getters.moreAgeStu(8)}}</h2>

    <h2>--------App内容: info对象的内容是否为响应式--------</h2>
    <h2>{{$store.state.info}}</h2>
    <button @click="updateInfo">修改信息</button>

    <h2>--------App内容: modules中的内容--------</h2>
    <!-- modules中的内容最终被放到了state中,所以可以通过 .对象的方式进行取用  -->
    <h2>{{$store.state.a.name}}</h2>
    <button @click="updateName">修改名称</button>
    <h2>{{$store.getters.fullName1}}</h2>
    <h2>{{$store.getters.fullName2}}</h2>
    <h2>{{$store.getters.fullName3}}</h2>
    <button @click="asyncUpdateName">异步修改</button>

    <h2>--------HelloVuex内容--------</h2>
    <hello-vuex/>
  </div>
</template>

<script>
  import HelloVuex from './components/HelloVuex'
  //导入常量
  import {INCREMENT} from './store/mutations-type'

  export default {
    name: 'App',
    components: {
      HelloVuex
    },
    data(){
      return {
        message: '苏州大学'
      }
    },
    methods: {
      //通过提交mutation的方式,而非直接改变store.state.count,Vuex可以更明确的追踪状态的变化
      incr(){
        //调用mutations中方法,通过commit进行调用,参数为在mutations中定义的方法名称
        this.$store.commit(INCREMENT) //使用常量,详见mutations-type.js文件
      },
      decr(){
        this.$store.commit('decrement')
      },
      //调用mutations中方法时,可以同时传入参数
      addCount(count){
        //1、普通的提交风格
        // this.$store.commit('incrCount',count)

        //2、特殊的提交封装,此时在store中接收到的参数为该对象,而不再是一个count
        this.$store.commit({
          type: 'incrCount',
          count
        })
      },
      addStudent(){
        const stu = {id: 114, name: 'Tom', age: 19}
        this.$store.commit('addStudent',stu)
      },
      updateInfo(){
        // 当调用mutations中的同步方法时使用commit
        // this.$store.commit('updateInfo')

        // 当调用Action中的异步方法时使用dispatch
        // this.$store.dispatch('aUpdateInfo','Action测试')

        // (不推荐使用)如果需要Action中的异步方法调用成功后再通知调用的地方,可以传入一个对象,在对象中包含函数以及需要传递给Action的参数
        // this.$store.dispatch('aUpdateInfo',{
        //   message: '携带的参数',
        //   success: () => {
        //     console.log('异步调用成功')
        //   }
        // })

        this.$store.dispatch('aUpdateInfo','Action测试').then(res => {
          console.log(res)
        })
      },
      updateName(){
        /*
          调用modules中的方法
          在commit中直接调用moduules中的方法,VUE会先从自己的mutations中找,如果没有找到,则到模块中找
          所以要注意不同模块之间的方法名称不要重复
        */
        this.$store.commit('updateName','草鸡大学')
      },
      asyncUpdateName(){
        this.$store.dispatch('aUpdateName')
      }
    }
  }
</script>

<style>
</style>
